<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>静态小球</title>
    <style>
        .circle {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            position: absolute;
        }
    </style>
</head>

<body>
    <script>
        const fg = document.createDocumentFragment();
        const posArr = [];
        const ranColor = () => {
            let r = Math.floor(Math.random() * 155 + 100);
            let g = Math.floor(Math.random() * 155 + 100);
            let b = Math.floor(Math.random() * 155 + 100);
            return `rgb(${r}, ${g}, ${b})`
        }
        const checkPos = (l, t) => {
            for (let i = 0; i < posArr.length; i++) {
                let o = posArr[i];
                if (l > o.l - 100 && l < o.l + 100 && t > o.t - 100 && t < o.t + 100) {
                    return true;
                } 
            }
            return false;
        }
        for (let i = 0; i < 20; i++) {
            let div = document.createElement("div");
            let ranLeft, ranRight;
            do {
                 ranLeft = Math.random() * (innerWidth - 100);
                 ranTop = Math.random() * (innerHeight - 100);
            } while (checkPos(ranLeft, ranTop))
            div.classList.add("circle");
            div.style.backgroundColor = ranColor();
            div.style.left = ranLeft + "px";
            div.style.top = ranTop + "px";
            posArr.push({ l: ranLeft, t: ranTop });
            fg.appendChild(div);
        }
        document.body.appendChild(fg);
    </script>
</body>

</html>